<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong1"></view>
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">帮助中心</view>
				<view class="return"></view>
			</view>
		</view>
		
		<!-- banner -->
		<view class="banner_wrap">
			<view class="banner_img">
				<view class="banner_text">您好！</view>
				<view class="banner_text">欢迎来到帮助中心！</view>
			</view>
		</view>
		
		<!-- 内容框 -->
		<view class="help_wrap">
			<!-- 搜索框 -->
			<view class="search_box"> 
				<view class="search_img">
					<image class="image" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/search.png" mode="aspectFit"></image>
				</view>
				<input class="input" confirm-type="search" type="text" placeholder="请输入您遇到的问题" placeholder-style="font-size:30upx;" :value="search_value" @input="inputListen" />
			</view>
			<!-- 投资者指南 -->
			<view class="investor_guide">
				<view class="guide_title">帮助指南</view>
				<scroll-view scroll-x class="scroll_guide" >
					<view class="guide_con">
						<view class="guide_item" v-for="(item,index) in guide" :key="index" @click="choosed(item)">
							<view class="guide_img">
								<image :src="Config_ysy.image_url + item.image" mode="aspectFit"></image>
							</view>
							<view class="guide_name">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="kong"></view>
		<!-- 常见问题 -->
		<view class="common_problem">
			<view class="problem_title">{{title}}</view>
			<view class="problem_list">
				<view class="problem_item" v-for="(item,index) in problem" @click="answer(item)">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guide:[],
				problem:[],
				search_value:'',
				title:'',
				token:''
			}
		},
		onLoad(option) {
			this.token=option.token
			this.get_helpClassList();
			this.get_problemLost();
		},
		methods: {
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 搜索监听
			inputListen(e){
				this.problem = [];
				this.search_value = e.detail.value;
				this.get_problemLost();
			},
			// 请求帮助中心分类列表
			get_helpClassList(){
				var url = '/api/home/help_center/categoryList';
				let params = {
					token:this.token
				};
				
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log(res)
					if (res.statusCode == 200 && res.data.code == 1) {
						this.guide = res.data.data;
					}
				});
			},
			// 请求问题列表
			get_problemLost(){
				var url = '/api/home/help_center/index';
				if(this.search_value == ''){
					var params = {
						token:this.token
					};
					this.title = '常见问题'
				}else{
					var params = {
						keyword:this.search_value,
						token:this.token
					};
					this.title = '搜索结果'
				}
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.problem = res.data.data;
					}
					
				});
			},
			// 跳转问题答案
			answer(item){
				uni.navigateTo({
					url:'/pages/answer/answer?id=' + item.id + '&title=' + item.title+'&token='+this.token
				})
			},
			
			// 点击切换问题
			choosed(item){
				this.search_value = '';
				this.problem = [];
				this.title = '常见问题-'	 + item.name;
				var url = '/api/home/help_center/index';
				var params = {
					category_id:item.id,
					token:this.token
				};
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log(res)
					if (res.statusCode == 200 && res.data.code == 1) {
						this.problem = res.data.data;
					}
					
				});
			}
		}
	}
</script>

<style lang="scss">
.content {
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong1{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.banner_wrap{
		width: 100%;
		padding-top: 200upx;
		.banner_img{
			width: 100%;
			height: 342upx;
			background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/help.png');
			background-size: cover;
			padding-left: 100upx;
			padding-top: 120upx;
			.banner_text{
	
			}
		}
	}
	.help_wrap{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		margin-top: -60upx;
		border-radius: 30upx 30upx 0 0;
		padding: 50upx 30upx;
		.search_box{
			width: 100%;
			height: 80upx;
			background: #ededed;
			border-radius: 15upx;
			display: flex;
			align-items: center;
			.search_img{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.image{
					width: 30upx;
					height: 30upx;
				}
			}
			.input{
				flex: 7;
				font-size: 30upx;
			}
			.search_btn{
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.investor_guide{
			width: 100%;
			padding-top: 20upx;
			.guide_title{
				width: 100%;
				height: 90upx;
				border-bottom: 2upx solid #f2f2f2;
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: bold;
				}
				.scroll_guide{
					width: 100%;
					height: 170upx;
					.guide_con{
						width: 100%;
						height: 170upx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.guide_item{
							width: 195upx;
							height: 170upx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							.guide_img{
								width: 195upx;
								display: flex;
								align-items: center;
								justify-content: center;
								image{
									width: 80upx;
									height: 80upx;
								}
							}
							.guide_name{
								width: 195upx;
								padding-top: 20upx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
			}
		}
	}
	.kong{
		width: 100%;
		height: 20upx;
		background: #f2f2f2;
	}
	.common_problem{
		width: 100%;
		height: 100%;
		padding:0 30upx;
		.problem_title{
			width: 100%;
			height: 80upx;
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
		}
		.problem_list{
			width: 100%;
			.problem_item{
				width: 100%;
				height: 100upx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
